﻿<!DOCTYPE html>
<html>
<head>
    <title>---</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            margin: 38px;
            /*width: 800px;*/
            /*height: 50px;*/
            text-align: center;
            /*border: 1px solid red;*/
            background-color: yellowgreen;
            vertical-align:top;
        }

        ul {
            list-style: none;
            display: inline-block;
            vertical-align:top;
        }

        ul {
            /*//height: 50px;*/
            /*//border:1px solid green;*/
        }

        li {
            background: #ccc;
            float: left;
        }

            li:hover {
                background: pink;
            }

        a {
            text-align: center;
            width: auto;
            min-width: 50px;
            height: 45px;
            line-height: 45px;
            position: relative;
            display: block;
            padding: 0 8px;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>
                <a href="#">1</a>
            </li>
            <li><a href="#">1</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">1</a></li>
        </ul>
    </div>
</body>
</html>
